import { Link } from '@brillout/docpress'
import { ConfigSpec } from '../../components'

<ConfigSpec
  env="client, server"
  global={null}
/>

The `+route` setting determines the page's <Link text="routing" href="/routing" />.

```ts
// /pages/product/+config.ts

import type { Config } from 'vike/types'

export default {
  route: '/product/@id'
} satisfies Config
```

```tsx
// /pages/product/+Page.tsx

export default Page

/* This page can have URLs such as:
   /product/12345
   /product/macbook-pro
   /product/iPhone42
   ...
*/
function Page() {
  return (
    <>
      <h1>Product Information</h1>
      {/* ... */}
    </>
  )
}
```

Instead of a Route String, you can also define a Route Function:

```ts
// /pages/product/+route.ts

export { route }

import type { PageContext } from 'vike/types'

function route(pageContext: PageContext) {
  const parts = pageContext.urlPathname.split('/')
  if (parts[1] !== 'product') {
    return false
  } else {
    return {
      routeParams: {
        id: parts[2]
      }
    }
  }
}
```


## See also

- <Link href="/routing" />
- <Link href="/route-string" />
- <Link href="/route-function" />
- <Link href="/filesystem-routing" />
- <Link href="/settings" />
